<template>
  <div class="main">
    <!-- 上 -->
    <div class="main_top">
      <el-row>
        <el-col>
          <div class="top_box_1" style="background: url(../../../static/img/home_1.png);">
            <div class="top_box_left">
              <div>今日交易金额(元)</div>
              <div>￥366,687</div>
            </div>
            <img src="../../../static/img/home_1_icon.png" alt />
          </div>
        </el-col>
        <el-col>
          <div class="top_box_1" style="background: url(../../../static/img/home_2.png);">
            <div class="top_box_left">
              <div>今日交易重量(公斤)</div>
              <div>56,114</div>
            </div>
            <img src="../../../static/img/home_2_icon.png" alt />
          </div>
        </el-col>
        <el-col>
          <div class="top_box_1" style="background: url(../../../static/img/home_3.png);">
            <div class="top_box_left">
              <div>今日交易笔数(笔)</div>
              <div>5,614</div>
            </div>
            <img src="../../../static/img/home_3_icon.png" alt />
          </div>
        </el-col>
        <el-col>
          <div class="top_box_1" style="background: url(../../../static/img/home_4.png);">
            <div class="top_box_left">
              <div>今日客流数量(人)</div>
              <div>5,614</div>
            </div>
            <img src="../../../static/img/home_4_icon.png" alt />
          </div>
        </el-col>
        <el-col>
          <div class="top_box_1" style="background: url(../../../static/img/home_5.png);">
            <div class="top_box_left">
              <div>今日检测数量(个)</div>
              <div>566</div>
            </div>
            <img src="../../../static/img/home_5_icon.png" alt />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 中 -->
    <div class="main_middle">
      <div class="main_middle_left">
        <el-row :gutter="20">
          <el-col :span="4" v-for="(item,index) in list" :key="index">
            <div class="middle_left_box">
              <img :src="item.img" alt />
              <div>{{item.val}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="main_middle_right">
        <div class="title">
          <img src="../../../static/img/title-img.png" alt />
          <div>租赁信息</div>
        </div>
        <div class="middle_right_echarts">
          <div id="middle_echarts"></div>
          <div class="middle_echarts_tips">
            <div>
              <div class="middle_echarts_tips-title">
                已租数量
                <i class="el-icon-caret-right"></i>
              </div>
              <div class="middle_echarts_tips-num">
                500
                <span>个</span>
              </div>
            </div>
            <div>
              <div class="middle_echarts_tips-title">
                未租数量
                <i class="el-icon-caret-right"></i>
              </div>
              <div class="middle_echarts_tips-num" style="color: #F2C26E;">
                63
                <span>个</span>
              </div>
            </div>
            <div>
              <div class="middle_echarts_tips-title" style="margin-left:2px">
                出&nbsp;租&nbsp;率&nbsp;
                <i class="el-icon-caret-right" style="margin-left:10px"></i>
              </div>
              <div class="middle_echarts_tips-num" style="color: #2A6BB6;">
                87
                <span>%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下 -->
    <div class="main_bottom">
      <div class="bottom_left">
        <div class="echarts_title_tips">
          <div class="title">
            <img src="../../../static/img/title-img.png" alt />
            <div>交易金额 / 客流数量</div>
          </div>
          <div class="echarts_title_tips">
            <div class="echarts_title_tips">
              <div class="line"></div>
              <div class="title_tips">交易金额</div>
            </div>
            <div class="echarts_title_tips" style="margin-left:18px">
              <div class="line" style="background:#F2C26E;"></div>
              <div class="title_tips">客流数量</div>
            </div>
          </div>
        </div>
        <div id="eransaction_echarts"></div>
      </div>
      <div class="bottom_right">
        <div class="title">
          <img src="../../../static/img/title-img.png" alt />
          <div>价格指数</div>
        </div>
        <div id="price_echarts"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "@vue/composition-api";
import { Message, MessageBox } from "element-ui";
export default {
  name: "homePage",
  setup() {
    const state = reactive({
      list: [
        { img: "../../../static/img/home-nav1.png", val: "商户信息" },
        { img: "../../../static/img/home-nav2.png", val: "人事管理" },
        { img: "../../../static/img/home-nav3.png", val: "供应商管理" },
        { img: "../../../static/img/home-nav4.png", val: "摊位管理" },
        { img: "../../../static/img/home-nav5.png", val: "巡检管理" },
        { img: "../../../static/img/home-nav6.png", val: "待办事项" },
        { img: "../../../static/img/home-nav7.png", val: "消防设施" },
        { img: "../../../static/img/home-nav8.png", val: "会员信息" },
        { img: "../../../static/img/home-nav9.png", val: "畅销分类" },
        { img: "../../../static/img/home-nav10.png", val: "维修管理" },
        { img: "../../../static/img/home-nav11.png", val: "商户考评" },
        { img: "../../../static/img/home-nav12.png", val: "商品追溯" },
      ],
    });
    //租赁信息饼图
    const leaseEcharts = () => {
      if (window.echarts) {
        let myChart = window.echarts.init(
          document.getElementById("middle_echarts")
        );
        let option = {
          title: {
            text: "563",
            subtext: "摊位数量",
            x: "43%",
            y: "39%",
            textAlign: "center",
            textStyle: {
              fontSize: 24,
              fontWeight: "bold",
              color: "#2A6BB6",
            },
            subtextStyle: {
              color: "#898989",
              fontSize: 14,
            },
          },
          tooltip: {
            show: true,
          },
          color: ["#399BEC", "#F2C26E"],
          series: [
            {
              type: "pie",
              radius: ["50%", "75%"],
              center: ["45%", "50%"],
              hoverAnimation: false,
              z: 10,
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  borderColor: "#fff",
                },
              },
              label: {
                show: false,
              },
              data: [90, 10],
              labelLine: {
                show: false,
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    };
    //交易折线图
    const eransactionEcharts = () => {
      if (window.echarts) {
        let myChart = window.echarts.init(
          document.getElementById("eransaction_echarts")
        );
        let option = {
          title: {
            x: "center",
            y: 0,
            textStyle: {
              color: "#151E26",
              fontSize: 14,
              fontWeight: "normal",
            },
          },
          grid: {
            right: "10%",
            top: "10%",
            bottom: "10%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
            ],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            axisLabel: {
              textStyle: {
                color: function (value, index) {
                  if (
                    value == "05" ||
                    value == "10" ||
                    value == "15" ||
                    value == "20" ||
                    value == "25" ||
                    value == "30"
                  )
                    return "#0071FF";
                  else return "#898989";
                },
              },
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: [
            {
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#DCE2E8",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#898989",
                },
              },
              splitLine: {
                show: false,
              },
            },
            {
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#DCE2E8",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#898989",
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],

          series: [
            {
              name: "",
              type: "line",
              smooth: true,
              yAxisIndex: 1,
              symbol: "none",
              itemStyle: {
                normal: {
                  color: "#29BB9D",
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(41, 187, 157, 0.17)",
                      },
                      {
                        offset: 1,
                        color: "rgba(41, 187, 157, 0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: [
                12148,
                18547,
                19852,
                13587,
                12475,
                11478,
                10247,
                16578,
                16578,
                13587,
                12475,
                11478,
                10247,
                10247,
                10247,
              ],
            },

            {
              name: "",
              type: "line",
              smooth: true,
              symbol: "none",
              itemStyle: {
                normal: {
                  color: "#FFC41F",
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(255, 196, 31, 0.21)",
                      },
                      {
                        offset: 1,
                        color: "rgba(255, 247, 4, 0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: [
                4600,
                5500,
                7500,
                8500,
                1500,
                2500,
                2200,
                2250,
                4600,
                5500,
                7500,
                8500,
                1500,
                1500,
                1500,
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    };
    //价格指数
    const priceEcharts = () => {
      if (window.echarts) {
        let myChart = window.echarts.init(
          document.getElementById("price_echarts")
        );
        let option = {
          backgroundColor: "#FAFBFD",
          grid: {
            top: "10%",
            left: "5%",
            right: "3%",
            bottom: "10%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          xAxis: [
            {
              type: "category",
              color: "#59588D",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#C9C9C9", //更改坐标轴颜色
                },
              },
              axisLabel: {
                color: function (value, index) {
                  if (
                    value == "05" ||
                    value == "10" ||
                    value == "15" ||
                    value == "20" ||
                    value == "25" ||
                    value == "30"
                  )
                    return "#0071FF";
                  else return "#898989";
                },
              },
              axisTick: {
                show: false,
              },
              // boundaryGap: true,
              data: [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12",
                "13",
                "14",
                "15",
                "16",
                "17",
                "18",
                "19",
                "20",
              ],
            },
          ],
          yAxis: [
            {
              type: "value",
              min: 0,
              splitNumber: 4,
              splitLine: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#C9C9C9", //更改坐标轴颜色
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#898989",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(131,101,101,0.2)",
                  type: "dashed",
                },
              },
            },
          ],
          series: [
            {
              name: "",
              type: "line",
              smooth: true, //是否平滑
              showAllSymbol: true,
              symbol: "none",
              symbolSize: 0,
              lineStyle: {
                normal: {
                  color: "#48B3FF",
                },
              },
              label: {
                show: false,
                position: "top",
                textStyle: {
                  color: "#48B3FF",
                },
              },

              itemStyle: {
                color: "#FFF",
                borderColor: "#48B3FF",
                borderWidth: 2,
              },
              tooltip: {
                show: true,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(195,230,255,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(195,230,255,0.1)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(195,230,255,0.1)",
                  shadowBlur: 10,
                },
              },
              data: [
                55,
                60,
                62,
                55,
                97,
                64,
                54,
                66,
                78,
                82,
                53,
                77,
                80,
                60,
                50,
                57,
                55,
                88,
                66,
                70,
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    };
    onMounted(() => {
      leaseEcharts();
      eransactionEcharts();
      priceEcharts();
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
.main_bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  .bottom_left {
    width: 648px;
    height: 355px;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.08);
    margin-left: 5px;
    .echarts_title_tips {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        margin-right: 10px;
      }
      .line {
        width: 18px;
        height: 6px;
        background: #53c889;
        margin-right: 5px;
        margin-top: 22px;
      }
      .title_tips {
        font-size: 14px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #666666;
        margin-top: 18px;
      }
    }
    #eransaction_echarts {
      width: 94%;
      height: 30vh;
      background: #fafbfd;
      margin-top: 17px;
      margin-left: 20px;
    }
  }
  .bottom_right {
    width: 988px;
    height: 355px;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.08);
    margin-right: 10px;
    #price_echarts {
      width: 95%;
      height: 30vh;
      background: #fafbfd;
      margin-top: 17px;
      margin-left: 20px;
    }
  }
}
.main_middle {
  width: 100%;
  height: 316px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .main_middle_left {
    width: 982px;
    height: 100%;
    margin-left: 5px;
    .middle_left_box {
      width: 148px;
      height: 118px;
      background: #fff;
      box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.08);
      text-align: center;
      padding-top: 30px;
      margin-bottom: 20px;
      div {
        font-size: 14px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #898989;
        margin-top: 23px;
      }
    }
  }
  .main_middle_right {
    width: 650px;
    height: 316px;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.08);
    margin-right: 13px;
    .middle_right_echarts {
      display: flex;
      align-items: center;
      justify-content: space-between;
      #middle_echarts {
        width: 100%;
        height: 239px;
      }
      .middle_echarts_tips > div {
        width: 327px;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #f5f6fb;
        margin-bottom: 9px;
        margin-right: 22px;
        .middle_echarts_tips-title {
          font-size: 14px;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          color: #898989;
          i {
            margin-left: 10px;
          }
        }
        .middle_echarts_tips-num {
          font-size: 24px;
          font-family: "Source Han Sans CN";
          font-weight: bold;
          color: #399bec;
          span {
            font-size: 16px;
          }
        }
      }
    }
  }
}
.main_top {
  width: 100%;
  padding-top: 5px;
  .el-row {
    display: flex;
    .el-col {
      width: 324px;
      height: 130px;
      margin-right: 10px;
      .top_box_1 {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
        img {
          position: absolute;
          right: 35px;
          top: 42px;
        }
        .top_box_left > div:first-child {
          font-size: 14px;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          color: #ffffff;
          padding: 33px 0 0 56px;
        }
        .top_box_left > div:last-child {
          font-size: 30px;
          font-family: "DIN-Bold";
          font-weight: bold;
          color: #ffffff;
          margin-left: 56px;
          margin-top: 10px;
        }
      }
    }
  }
}
.title {
  font-size: 16px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #434343;
  display: flex;
  align-items: center;
  margin: 20px 0 0 20px;
  img {
    margin-right: 4px;
  }
}
</style>